<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页演示</title>
    <script type="text/javascript" src="/assets/js/jquery.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.pager.js"></script>
    <style>
        .pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }
        .pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
        .pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
        .pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
        .pager .noPage { color: #a4a4a4; }
        .pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
        .pager .flip { width: 56px; }
        .pager input{width:20px}
    </style>
</head>
<body>
<#assign username="李四">
<@commonUI.userHeader userDto/>
<div>分页来了</div>
<div id="newsList"></div>
<div class="pager">
</div>

</body>

<script>
    var pager = $(".pager").pager({itemCount: ${pager.totalRecord}, onPageChanged: ajaxList});

    function ajaxList(pageIndex){
        $.ajax({
            url:'/page/ajaxPage.htm',
            type:'post',
            dataType:'html',
            data:{'pageNumber':pager.getPageIndex()},
            success:function(data){
                $("#newsList").html("").html(data);
            }
        })
    }
    $(function($) {
        ajaxList(0);
    });

</script>
</html>